<template>
  <div>个人信息</div>
  <h2>姓名：{{data.name}}</h2>
  <h2>年龄：{{data.age}}</h2>
  <h2>{{msg}}{{name}}</h2>
  <button @click="test">按钮</button>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: 'Demo',
  props:['msg','name'],
  emits: ['hello'],
  setup(props, context){
    // console.log("---setup------", this)  //undefind
    // console.log(props, props.msg, props.name) // Proxy{}, xxx, xxx
    // console.log(context)  // {expose: xxx}
    // console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
    // console.log('---setup---',context.emit) //触发自定义事件的。
    console.log('---setup---',context.slots) //插槽
    let data = reactive({
      name: "rock",
      age: 18,
    })
    function test(){
      context.emit('hello',666)
    }
    return{
      data,
      test
    }
  }
}
</script>

<style>

</style>
